<template>
  <div class="city-form">
    <el-form ref="cityForm" :model="cityForm" class="form-wrap" size="small" :rules="enableValidate?cityRules : ''">
      <el-form-item :label="label" prop="provinceCode">
        <el-select clearable v-model="cityForm.provinceCode" filterable @change="queryCitys" placeholder="请选择地址">
          <el-option v-for="item in provinces" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label class="no_text" prop="cityCode">
        <el-select clearable v-model="cityForm.cityCode" filterable @change="queryCounty" placeholder="请选择地址">
          <el-option v-for="item in citys" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label class="no_text" prop="countyCode">
        <el-select clearable v-model="cityForm.countyCode" filterable @change="changeCounty" placeholder="请选择地址">
          <el-option v-for="item in countys" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getDivision } from '@/admin/api/division'

export default {
  name: "citySelect",
  props: {
    areaCode: {
      type: String,
      default: '440000-440300-440304'
    },
    label: {
      type: String,
      default: '地址'
    },
    enableValidate: {
      type: Boolean,
      default: true
    }
  },
  watch: {

    //解决父子组件动态传值  渲染速度超过数据请求速度
    areaCode: {
      handler: function (val) {
        if (val) {
          this.watchOff = false
          let codes = val.split("-")
          if (codes.length == 3) {
            this.cityForm.provinceCode = codes[0]
            this.queryCitys(codes[0])
            this.cityForm.cityCode = codes[1]
            this.queryCounty(codes[1])
            this.cityForm.countyCode = codes[2]
            this.changeCounty(codes[2])
          }
        }
      },
      deep: true,
    }
  },
  created () {
    this.queryProvince()
  },
  computed: {
    chArea: function () {
      let p = this.selectProvince ? this.selectProvince.label : ''
      let c = this.selectCity ? this.selectCity.label : ''
      let y = this.selectCounty ? this.selectCounty.label : ''
      return p + c + y
    }
  },
  data () {
    return {
      watchOff: true,
      cityForm: {
        provinceCode: '',
        cityCode: '',
        countyCode: '',
      },
      provinces: [],
      citys: [],
      countys: [],
      selectProvince: '',
      selectCity: '',
      selectCounty: '',
      cityRules: {
        provinceCode: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
        cityCode: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
        countyCode: [
          { required: true, message: "请选择", trigger: "blur" },
        ]
      },

    }

  },
  methods: {
    queryProvince () {
      getDivision({ "lazy": true, parentId: "000000" }).then(rep => {
        let rep_province = rep.data.data
        this.provinces = rep_province.map(p => {
          return { "label": p.divisionName, "value": p.divisionCode }
        })
      })
    },
    //获取城市
    queryCitys (val) {
      //查找省市县名称
      getDivision({ "lazy": true, parentId: val }).then(rep => {
        let rep_city = rep.data.data
        this.citys = rep_city.map(p => {
          return { "label": p.divisionName, "value": p.divisionCode }
        })
        this.selectProvince = this.provinces.find(p => p.value == this.cityForm.provinceCode)
        // this.$emit('changeArea', this.chArea, this.cityForm.provinceCode)
      })


    },
    changeCounty (val) {
      this.selectCounty = this.countys.find(p => p.value == this.cityForm.countyCode)
      if (this.chArea) {
        this.$emit('changeArea', this.chArea, this.cityForm.provinceCode + '-' + this.cityForm.cityCode + '-' + val)
      }
    },
    //获取县区
    queryCounty (val) {
      getDivision({ "lazy": true, parentId: val }).then(rep => {
        let rep_county = rep.data.data
        this.countys = rep_county.map(p => {
          return { "label": p.divisionName, "value": p.divisionCode }
        })
        this.selectCity = this.citys.find(p => p.value == this.cityForm.cityCode)
        // this.$emit('changeArea', this.chArea, this.cityForm.provinceCode + '-' + val)
      })

    },
  }
}
</script>
<style scoped lang="scss">
@include formWrap(3);
.city-form > form {
  padding: 0px;
}
.no_text {
  padding-top: 32px;
}
</style>
